$s-service-row-action-button: 36px;
$s-service-row-leading: 18px;
$s-service-row-column-spacing: ($s-service-row-action-button - $s-service-row-leading) * 0.5;
$s-service-row-z-link: 10;

.service-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: $s-service-row-action-button;
  box-sizing: content-box;
  line-height: $s-service-row-leading;
  position: relative;

  &:not(:last-of-type) {
    border-bottom: 1px solid $divider-color;
  }

  &:hover .service-row__action-button {
    position: relative;
    z-index: $s-service-row-z-link + 1;
  }

  &:not(.service-row--header):hover {
    background-color: $cool-whitegray;
    color: $cool-charcoal;
  }

  &.service-row--clickable {
    cursor: pointer;
  }

  &.service-row--header {
    font-weight: 600;
    border-bottom-width: 2px;
  }

  &.service-row--active {
    color: $cool-darkgray;
  }

  &.service-row--inactive {
    color: $cool-silver;
  }
}

.service-row__link-overlay {
  position: absolute;
  z-index: $s-service-row-z-link;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.service-row__column {
  padding: $s-service-row-column-spacing;

  &.service-row__column--name {
    flex: 6;
  }

  &.service-row__column--count {
    flex: 1;
    line-height: 18px;
  }

  &.service-row__column--actions {
    min-width: $s-service-row-action-button * 2;
    text-align: right;
    padding: 0 $s-service-row-column-spacing;
    box-sizing: content-box;
    white-space: nowrap;
  }

  &.service-row__column--submission,
  &.service-row__column--status {
    flex: 1;
    padding: 0 $s-service-row-column-spacing;
    line-height: $s-service-row-action-button;
    white-space: nowrap;
  }

  &.service-row__column--date {
    flex: 1;
  }

  &.service-row__column--success {
    color: $cool-gray;
  }

  &.service-row__column--pending {
    color: $cool-green;
  }

  &.service-row__column--failed {
    color: $cool-red;
  }
}

.service-row__action-button {
  appearance: none;
  border: 0;
  padding: 0;
  width: $s-service-row-action-button;
  height: $s-service-row-action-button;
  font-size: $s-service-row-action-button;
  color: inherit;
  cursor: pointer;
  background: transparent;
  display: inline-block;
  vertical-align: top;

  &[disabled] {
    opacity: 0.5;
    pointer-events: none;
  }

  &:hover {
    color: $cool-blue;
  }
}

.service-row-button {
  @include box-shadow;
  margin-top: $s-service-row-column-spacing;
  width: 100%;
  min-height: $s-service-row-action-button;
  box-sizing: content-box;
  line-height: $s-service-row-leading;
  border: 0;
  padding: 0;
  text-transform: uppercase;
  cursor: pointer;
  color: $cool-charcoal;

  &:hover {
    color: $cool-darkgray;
  }

  &:active {
    color: $cool-gray;
  }

  &.service-row-button--loading {
    pointer-events: none;
    color: $cool-silver;
  }
}
